<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui-v2.6.8/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">

    <link rel="stylesheet" href="../plugins/jquery-step/jquery.step.css?v=${.Config.basic.version}" media="all">
    <style>
        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        }
        .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
        .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
    <style>
        .layui-form-label-lg {
            width: 150px;
        }

        .ui-step-wrap .ui-step .ui-step-item div {
            text-align: center;
            color: #899eb2;
        }
        button {
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            text-align: center;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #fff;
            background-color: #4958b9;
        }
        
        .main {
            width: 750px;
            margin: 10px auto;
        }
        
        #step {
            margin-bottom: 20px;
        }
        
        .btns {
            float: left;
        }
        
        .info {
            float: left;
            height: 34px;
            line-height: 34px;
            margin-left: 40px;
            font-size: 28px;
            font-weight: bold;
            color: #928787;
        }
        
        .info span {
            color: red;
        }
    </style>
</head>
<body>

    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="form_search" id="form_search" action="">
                <div class="layui-form-item">


                    <div class="layui-inline">
                        <!--<label class="layui-form-label auto-size-label"></label>-->
                        <div class="layui-input-inline">
                            <input type="text" name="txt_key" placeholder="请输入关键字" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm action-export layui-hide" lay-submit="" lay-filter="btn_search"><i class="fa fa-file-excel-o"></i> 导出</button>-->
                    </div>

                    <div class="layui-inline fr">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal action-edit layui-hide" lay-submit="add" lay-filter="add"><i class="layui-icon layui-icon-release"></i>更换终端</button>
                    </div>

                </div>
            </form>

            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>

    

    


</body>


<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/layui-v2.6.8/layui/layui.js"></script>
<script src="../plugins/jquery.slimscroll.min.js"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script src="../plugins/moment.min.js"></script>
<script src="../plugins/jquery-step/jquery.step.min.js?v=${.Config.basic.version}"></script>
<script src="../js/utils.js?v=${.Config.basic.version}"></script>
<script src="../js/func.js?v=${.Config.basic.version}"></script>
<script>
    var table=null;
    var form=null;
    var Table=null;
    var element = null;
    var sys_roles=null;
    var lay_index = null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var dictionary=JSON.parse(window.localStorage.getItem("dictionary"));
    var func_url="${.func_url}";
    var actions=[];
    token = 'Bearer ' + token;

    var $step = null;

    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','layer','form', 'table','transfer','laydate','element','dropdown'],function(){

        $ = layui.$;
        form = layui.form;
        table = layui.table;
        element = layui.element;

        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        //监听提交
        form.on('submit(btn_search)', function(data){
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})
            search({key:data.field.txt_key});
            return false;
        });

        form.on('submit(add)', function(data){

            $(".step-box").hide();
            $(".step-0").show();

            lay_index = layer.open({
                //area: 'auto',
                area:['780px','500px'],
                type: 1,
                shade: 0.5,
                offset: '15%',
                shadeClose:true,
                title: '增加', //不显示标题
                content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                
            });

            
            

            return false;
        });

        form.on('submit(btn_ok)', function(data){
            console.info(data.field);
            if(data.field.old_addr.length!=8){
                toastr.warning("终端SN错误", "提示");
                return;
            }
            if(data.field.new_addr.length!=8){
                toastr.warning("终端SN错误", "提示");
                return;
            }

            layer.confirm("更换大概需要几分钟,请耐心等待,确认更换？", function(index){
                layer.close(index);
                layer.load(1);
                $.ajax({
                    type: "POST",
                    url:'../Api/Device/HzfgwReplace',
                    data: data.field,
                    beforeSend: function(request) {
                        request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                    },
                    dataType: "json",
                    success: function (res) {
                        if(res.code>=0){
                            layer.close(lay_index);
                            search();
                        }else{
                            layer.close(lay_index);
                            layer.alert(res.msg);
                            toastr.warning(res.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('加载信息失败');
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        layer.closeAll('loading');
                    },

                });
            });

            
        });

        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Device/HzfgwReplace/Page'
            ,height: 'full-90'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {}
            ,page: {
                limit:50,
                limits:[10, 20, 30, 40, 50,100,200,300,400],
                theme: '#3c7cff'
            }
            //,limit:30
            //,toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:false
            ,size: 'sm' //小尺寸的表格
            ,skin: 'nob' //无框风格
            ,cols: [[
                {field:'id', title:'id',hide:true}
                ,{field:'farmname', title:'场区',sort: true}
                ,{field:'housename', title:'单元',sort: true}
                // ,{field:'hnum', title:'栏位',sort: true, width:80}
                ,{field:'old_addr', title:'旧终端SN', width:120,sort: true}
                ,{field:'new_addr', title:'新终端SN', width:120,sort: true}
                ,{field:'reason', title:'更换原因', width:120,sort: true}
                
                ,{field:'create_date', title:'操作时间', width:160,align:'center', sort: true}
                ,{field:'create_user', title:'操作人员', width:100,align:'center', sort: false}
            ]]
            ,done: function(res, curr, count){
                element.render();
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            }
        });

        table.on('sort(table)', function(obj){
            for(var i=0;i<actions.length;i++){
                $('.action-'+actions[i].action_id).removeClass("layui-hide");
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title: '上传'
                        ,content: '/Admin/FirmwareUpload'
                        ,maxmin: true
                        ,area: ['550px', '550px']
                        ,offset: '100px'
                        ,btn: ['关闭']
                        ,yes: function(index, layero){
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#btn_ok");
                            submit.click();
                        }
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var item = obj.data;
            //console.log(data)
            if(obj.event === 'view'){
                onView(item);
            }
        });


        

        

        //$index.text($step.getIndex());
        $("#prevBtn").on("click", function() {
            $step.prevStep();
            $index.text($step.getIndex());
        });

        $("#nextBtn").on("click", function() {
            $step.nextStep();
            $index.text($step.getIndex());
        });
    });



    function search(params) {
        Table.reload({
            where: params
        });
    }

</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>


<form class="layui-form" lay-filter="form" id="form" style="display:none;">
    <div class="main">
        
        <div id="step"></div>

        <div class="layui-card step-box step-0" style="display: none;">
            <!-- <div class="layui-card-header"></div> -->
            <div class="layui-card-body">

                <form class="layui-form" lay-filter="form">
                    <div class="layui-form-item">
                        <!-- <label class="layui-form-label layui-form-label-lg"></label> -->
                        <span class="layui-text-orange layui-text-sm" style="padding: 9px 15px;"><i class="layui-icon layui-icon-tips"></i> 请拆下原终端并已换上新的终端且新终端已经在线，确认无误后点击保存</span>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 原终端SN</label>
                        <div class="layui-input-inline">
                            <input type="text" name="old_addr" lay-verify="number" maxlength="8" lay-verType="tips" autocomplete="off" placeholder="8位终端SN" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 新终端SN</label>
                        <div class="layui-input-inline">
                            <input type="text" name="new_addr" lay-verify="number" maxlength="8" lay-verType="tips" autocomplete="off" placeholder="8位终端SN" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"><span class="layui-text-red">*</span> 更换原因</label>
                        <div class="layui-input-inline">
                            <select name="reason" lay-filter="reason" lay-verify="required" lay-search=""  >
                                <option value="进水短路">进水短路</option>
                                <option value="网口生锈无法联网">网口生锈无法联网</option>
                                <option value="与饲喂器无法通信">与饲喂器无法通信</option>
                                <option value="黑屏无法启动">黑屏无法启动</option>
                                <option value="SN变更无法恢复">SN变更无法恢复</option>
                                <option value="无法升级">无法升级</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-lg"></label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal action-edit" lay-submit lay-filter="btn_ok">保存</button>
                            <!-- <button type="button" class="layui-btn layui-btn-warm action-edit" lay-submit lay-filter="btn_ok">取消</button> -->
                        </div>
                    </div>

                </form>

            </div>
        </div>

    </div>
</form>
</html>